<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts学习绘图1-2023年12月7日</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="//mirror.fe80.cn/echarts/5.4.3/echarts.min.js"></script>
    <style>
body>div{
  height:400px;
}
@media screen and (min-width: 300px) {
  body>div{
    width: 95%;
    margin: 0 auto;
  }
}
@media screen and (min-width: 600px) {
  body>div{
    width: 80%;
    margin: 20px auto;
  }
}
@media screen and (min-width: 1000px) {
  body>div{
    width: 60%;
    margin: 20px auto;
  }
}
    </style>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main1"></div>
    <hr>
    <div id="main2"></div>
    <hr>
    <div id="main3"></div>
    <hr>
    <div id="main4"></div>
    <hr>
    <div id="main5"></div>
    <hr>
    <div id="main6"></div>
    <hr>
    <div id="main7"></div>
    <hr>
<script type="text/javascript">
// +------------------------------------------------
// | 第一个图： 柱状图和线性图
// +------------------------------------------------

// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('main1'));
// 指定图表的配置项和数据
var option1 = {
    title: {
        text: '柱状图比例'
    },
    tooltip: {},
    legend: {
        data: ['平江村', '亮司村', '龙池村', '雷屯村'],
        backgroundColor: '#fff',
        textStyle: {
        color: '#222'
        }
    },
    xAxis: {
        type: 'category',
        data: ['2021', '2022', '2023', '2024']
    },
    yAxis: {},
    series: [
        {
            type: 'bar',
            name: '平江村',
            data: [89.3, 92.1, 94.4, 85.4],
            itemStyle: {
                // barBorderRadius: 5,
                // borderWidth: 1,
                // borderType: 'solid',
                borderColor: 'rgb(255, 99, 132)',
                // shadowColor: '#5470c6',
                // shadowBlur: 3
                color: 'rgba(255, 99, 132, 0.2)'
            }
        },
        {
            type: 'bar',
            name: '亮司村',
            data: [95.8, 89.4, 91.2, 76.9],
            itemStyle: {
                borderColor: 'rgb(255, 159, 64)',
                color: 'rgba(255, 159, 64, 0.2)'
            }
        },
        {
            type: 'bar',
            name: '龙池村',
            data: [97.7, 83.1, 92.5, 78.1],
            itemStyle: {
                borderColor: 'rgb(75, 192, 192)',
                color: 'rgba(75, 192, 192, 0.2)'
            }
        },
        {
            type: 'line',
            name: '雷屯村',
            data: [92.7, 73.1, 62.5, 83.1],
            itemStyle: {
                borderColor: 'rgb(153, 102, 255)',
                color: 'rgba(153, 102, 255, 0.9)'
            }
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option1);


// +------------------------------------------------
// | 第二个图： 堆叠柱状图
// +------------------------------------------------
var myChart2 = echarts.init(document.getElementById('main2'));
// 指定图表的配置项和数据
var option2 = {
    title: {
        text: '堆叠柱状图'
    },
    tooltip: {},
    legend: {
        data: ['敦寨村', '平江村', '亮司村', '龙池村', '雷屯村'],
        backgroundColor: '#fff',
        textStyle: {
            color: '#222'
        }
    },
    xAxis: {
        // type: 'category',
        data: ['敦寨村', '平江村', '亮司村', '龙池村', '雷屯村'],
    },
    yAxis: {},
    series: [
        {
            data: [10, 22, 28, 43, 49],
            type: 'bar',
            stack: 'x',
            itemStyle: {
                borderColor: 'rgb(255, 126, 122)',
                color: 'rgba(255, 126, 122, 0.8)'
            }
        },{
            data: [5, 4, 3, 5, 10],
            type: 'bar',
            stack: 'x',
            itemStyle: {
                borderColor: 'rgb(146, 208, 80)',
                color: 'rgba(146, 208, 80, 0.8)'
            }
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
myChart2.setOption(option2);

// +------------------------------------------------
// | 第三个图： 动态排序柱状图
// +------------------------------------------------
var myChart3 = echarts.init(document.getElementById('main3'));

var data = [];
for (let i = 0; i < 5; ++i) {
    data.push(Math.round(Math.random() * 200));
}

option3 = {
    title: {
        text: '动态排序柱状图'
    },
    xAxis: {
        max: 'dataMax'
    },
    yAxis: {
        type: 'category',
        data: ['敦寨村', '平江村', '亮司村', '龙池村', '雷屯村'],
        inverse: true,
        animationDuration: 300,
        animationDurationUpdate: 300,
        max: 2 // only the largest 3 bars will be displayed
    },
    series: [
        {
            realtimeSort: true,
            name: '旅游人次',
            type: 'bar',
            data: data,
            label: {
                show: true,
                position: 'right',
                valueAnimation: true
            },
            itemStyle: {
                borderColor: 'rgb(255, 159, 64)',
                color: 'rgba(255, 159, 64, 0.2)'
            }
        }
    ],
    legend: {
        show: true
    },
    animationDuration: 3000,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
};

function update() {
    var data = option3.series[0].data;
    for (var i = 0; i < data.length; ++i) {
        if (Math.random() > 0.9) {
            data[i] += Math.round(Math.random() * 2000);
        } else {
            data[i] += Math.round(Math.random() * 200);
        }
    }
    myChart3.setOption(option3);
}
update();
setInterval(function() {
    update();
}, 3000);


// +------------------------------------------------
// | 第四个图： 堆叠柱状图
// +------------------------------------------------
var myChart4 = echarts.init(document.getElementById('main4'));

var option4 = {
  title: {
    text: '敦寨镇旅游人数',
    left: 'center',
    top: 'center'
  },
    tooltip: {},
  series: [
    {
      type: 'pie',
      data: [
        {
          value: 335,
          name: '雷屯村',
            itemStyle: {
                color: 'rgba(255, 126, 122, 0.8)'
            }
        },
        {
          value: 234,
          name: '龙池村',
            itemStyle: {
                color: 'rgba(255, 159, 64, 0.8)'
            }
        },
        {
          value: 1548,
          name: '亮司村',
            itemStyle: {
                color: 'rgba(75, 192, 192, 0.8)'
            }
        },
        {
          value: 754,
          name: '平江村',
            itemStyle: {
                color: 'rgba(0, 133, 255, 0.8)'
            }
        }
      ],
      radius: ['40%', '70%']
    }
  ]
};
myChart4.setOption(option4);



// +------------------------------------------------
// | 第五个图： 圆角环形图
// +------------------------------------------------
var myChart5 = echarts.init(document.getElementById('main5'));
var option5 = {
  title: {
    text: '敦寨镇旅游人次',
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  tooltip: {},
  series: [
    {
      name: '敦寨镇旅游人次',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '雷屯村' },
        { value: 735, name: '龙池村' },
        { value: 580, name: '亮司村' },
        { value: 484, name: '平江村' },
        { value: 300, name: '笋屯村' }
      ]
    }
  ]
};
myChart5.setOption(option5);



// +------------------------------------------------
// | 第六个图： 圆角环形图
// +------------------------------------------------
var myChart6 = echarts.init(document.getElementById('main6'));
var option6 = {
  title: {
    text: '基础仪表盘',
  },
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [
    {
      name: '基础仪表盘',
      type: 'gauge',
      progress: {
        show: true
      },
      detail: {
        valueAnimation: true,
        formatter: '{value}'
      },
      data: [
        {
          value: 39,
          name: '完成情况',
            itemStyle: {
                borderColor: 'rgb(255, 126, 122)',
                color: 'rgba(255, 126, 122, 0.9)'
            }
        }
      ]
    }
  ]
};
myChart6.setOption(option6);


// +------------------------------------------------
// | 第七个图： 指定数据到坐标轴
// +------------------------------------------------
var myChart7 = echarts.init(document.getElementById('main7'));
var option7 = {
  title: {
    text: '指定数据到坐标轴',
  },
  dataset: {
    source: [
      ['score', '分数', 'product'],
      [89.3, 58212, '七(1)班'],
      [57.1, 78254, '七(2)班'],
      [74.4, 41032, '七(3)班'],
      [50.1, 12755, '七(4)班'],
      [89.7, 20145, '七(5)班'],
      [68.1, 79146, '七(6)班'],
      [19.6, 91852, '七(7)班'],
      [10.6, 101852, '七(8)班'],
      [32.7, 20112, '七(9)班']
    ]
  },
  grid: { containLabel: true },
  xAxis: { name: '分数' },
  yAxis: { type: 'category' },
  visualMap: {
    orient: 'horizontal',
    left: 'center',
    min: 10,
    max: 100,
    text: ['高分', '低分'],
    dimension: 0,
    inRange: {
      color: ['#65B581', '#FFCE34', '#FD665F']
    }
  },
  series: [
    {
      type: 'bar',
      encode: {
        // Map the "amount" column to X axis.
        x: '分数',
        // Map the "product" column to Y axis
        y: 'product'
      }
    }
  ]
};
myChart7.setOption(option7);
</script>
</body>
</html>